<template>
  <div>
    <el-container class="container">
      <el-header class="header">
        <h3>Mall-Pro-Admin</h3>
      </el-header>
      <el-container>
        <el-aside width="250px" class="menu-box">
          <el-menu default-active="2" class="menu">
            <template v-for="first in menus">
              <!-- 首级菜单 含有子类 -->
              <el-submenu :key="first.id" v-if="first.children.length > 0" :index="first.id+''">
                <template slot="title">
                  <i class="el-icon-setting"></i>
                  <span>{{ first.name }}</span>
                </template>
                <el-menu-item v-for="second in first.children" :key="second.id" :index="second.id+''">
                  <i class="el-icon-setting"></i>
                  <span slot="title">{{ second.name }}</span>
                </el-menu-item>
              </el-submenu>
              <el-menu-item :key="first.id" v-else :index="first.id+''">
                <i class="el-icon-setting"></i>
                <span slot="title">{{ first.name }}</span>
              </el-menu-item>
            </template>
          </el-menu>
        </el-aside>
        <el-main class="main-box">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>活动管理</el-breadcrumb-item>
            <el-breadcrumb-item>活动列表</el-breadcrumb-item>
            <el-breadcrumb-item>活动详情</el-breadcrumb-item>
          </el-breadcrumb>
          <div class="main">
            <router-view></router-view>
          </div>
          <div class="main-foot">
            © 2020 程序猿小码 Powered by MRC & Element-Ui 陕ICP备19022655号
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import '@/assets/css/common.css'

export default {
  name: 'Index',
  data () {
    return {
      menus: []
    }
  },
  methods: {}
}
</script>

<style>

.header {
  background-color: #324057;
  color: white;
}

.container {
  height: 100%;
  width: 100%;
  position: fixed;
}

.menu-box {
  border-right: solid 1px #e6e6e6;
}

.menu {
  border-right: solid 0px;
}

.main-box {
  background-color: #e5e9f2;
}

.main {
  width: 100%;
  height: 88%;
  margin-top: 20px;
  border-radius: 10px;
  background-color: white;
  padding: 20px;
}

.main-foot {
  padding-top: 10px;
  font-size: 12px;
  text-align: center;
}
</style>
